import React, { useState, useEffect } from 'react';

import { NavBar, Icon, Accordion, Modal, List, Button, Radio, Toast, TextareaItem } from 'antd-mobile';

import { GetDetailsRefund, PostRefund } from "@/api/tutor/orderList.js"

//todo 需要增加退款相关的信息
//展示当前状态，进入if地狱
const OrderDetails = (props) => {
    // 订单详情
    let [orderDetailsObject, setOrderDetailsObject] = useState({
        students: []
    })

    let [refundDetailsVisible, setRefundDetailsVisible] = useState(false)

    let [comment, setComment] = useState('')


    function btnFn () {
        if (props.location.data && props.location.data._type) {
            return (
                <div className="form-footer">
                    <Button type="primary" style={{ display: props.location.data._type == 'pending' ? 'block' : 'none' }} onClick={() => {
                        setRefundDetailsVisible(true)
                    }}>退款申请</Button>
                </div>
            )
        }
    }


    useEffect(() => {
        if (props.location.data) {
            let postData = {};
            postData.apply_id = props.location.data.id;


            GetDetailsRefund(postData).then(res => {
                if (res.code == '000000') {
                    setOrderDetailsObject(res.responseData)
                }
            }).catch(err => {

            })
        }
    }, [])

    return (
        <div className="order-details">
            <div className="page-title  order-tit">
                <NavBar
                    mode="light"
                    icon={<Icon type="left" />}
                    onLeftClick={() => {
                        props.history.goBack()
                    }}
                >
                    退款-订单详情
                </NavBar>

            </div>
            <div className="page-content student-content">
                <div className="student-content-piece">
                    <div className="form-box">
                        <div className="form-tit">
                            <i className="mini-block"></i>
                            <strong>基本信息</strong>
                        </div>
                        <div className="form-con">
                            <List>
                                <List.Item extra={orderDetailsObject.status}>订单状态</List.Item>
                                <List.Item
                                    multipleLine
                                    onClick={() => { }}
                                    platform="android"
                                >
                                    辅导科目<List.Item.Brief> {orderDetailsObject.subjects} </List.Item.Brief>
                                </List.Item >
                                <List.Item extra={orderDetailsObject.audit_time}>发布时间</List.Item>
                                <List.Item extra={orderDetailsObject.learn_hours}>辅导时长</List.Item>
                                <List.Item extra={orderDetailsObject.class_fee}>课时费</List.Item>
                                <List.Item
                                    multipleLine
                                    platform="android"
                                >
                                    工作地址<List.Item.Brief> {orderDetailsObject.learn_address} </List.Item.Brief>
                                </List.Item >
                            </List>
                        </div>
                        {/* <Accordion defaultActiveKey="0" className="my-accordion" >
                            {
                                orderDetailsObject.students.map((item, index) => {
                                    return (
                                        <Accordion.Panel header={<b>{`辅导对象信息 ${index + 1}`}</b>} key={index}>
                                            <List>
                                                <List.Item extra={item.name}>性名</List.Item>
                                                <List.Item extra={item.gender}>性别</List.Item>
                                                <List.Item extra={item.grade}>年级</List.Item>
                                                <List.Item
                                                    multipleLine
                                                    platform="android"
                                                >
                                                    辅导对象说明<List.Item.Brief> {item.note} </List.Item.Brief>
                                                </List.Item >
                                            </List>
                                        </Accordion.Panel>

                                    )
                                })
                            }
                        </Accordion> */}
                        <div className="form-tit">
                            <i className="mini-block"></i>
                            <strong>其他信息</strong>
                        </div>
                        <div className="form-con">
                            <List>
                                <List.Item
                                    multipleLine
                                    platform="android"
                                >
                                    工作要求<List.Item.Brief> {orderDetailsObject.demand} </List.Item.Brief>
                                </List.Item >
                            </List>
                        </div>
                        {
                            // btnFn()
                        }
                    </div>

                </div>
            </div>
        </div >
    )

};

export default OrderDetails